<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>产品信息管理界面</title>
    <link href="<%=request.getContextPath()%>/fare/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="<%=request.getContextPath()%>/fare/lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script> 
    <script src="<%=request.getContextPath()%>/fare/lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/fare/lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script> 
    <script src="<%=request.getContextPath()%>/fare/lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/fare/lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
     <script src="<%=request.getContextPath()%>/fare/lib/ligerUI/js/plugins/ligerMenu.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/fare/lib/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/fare/lib/ligerUI/js/plugins/ligerMenuBar.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/fare/lib/ligerUI/js/plugins/ligerToolBar.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/fare/lib/ligerUI/js/plugins/ligerButton.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/fare/lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/fare/lib/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/fare/lib/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/fare/lib/ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script>
    <script src="productData.js" type="text/javascript"></script>
    <script type="text/javascript">
        var gridManager = null;
        var columns= [
					{ display: '产品名称', name: 'name'
					},{ display: '航空公司名称', name: 'companyName'
					},{ display: '产品类型', name: 'productType'
					},{ display: '航程', name: 'voyage'
					},{ display: '起始城市', name: 'startCity'
					},{ display: '目标城市', name: 'endCity'
					},{ display: '舱位', name: 'space'
					},{ display: '预定日期', name: 'tagetDate'
					},{ display: '旅行日期', name: 'travelDate'
					},{ display: '价格', name: 'price'
					},{ display: '产品链接', name: 'productLink'
					}]
        $(function ()
        {
        	
        	 //工具条
            $("#toptoolbar").ligerToolBar({ items: [
                { text: '增加', id:'add', click: itemclick },
                { text: '修改', id:'modify', click: itemclick },
                { text: '删除', id:'delete', click: itemclick }
            ]
            });

            //表格
            $.getJSON("<%=request.getContextPath()%>/productManageAction!showProducts.action?1="+Math.random(),function(data){
	            $("#maingrid").ligerGrid({
	                columns: columns, 
					dataAction: 'server', data: data,
	                width: '100%', height: '100%', pageSize: 30,rownumbers:true,
	                checkbox : true,
	                heightDiff: -6
	            });
	             
	            gridManager = $("#maingrid").ligerGetGridManager();
	            $("#pageloading").hide();
	         });
	         $("#tagetDate").ligerDateEditor({ 
	    	    		showTime: true, 
	    	    		format:"yyyy-MM-dd hh:mm",
	    	    		width:150,
	    	    		}); 
	    	$('#travelDate').ligerDateEditor({ 
	    		showTime: true, 
	    		format:"yyyy-MM-dd hh:mm",
	    		width:150,
	    		});
        });
	

        function itemclick(item)
        { 
            if(item.id)
            {
                switch (item.id)
                {
                    case "add":
                		add();
                		return;
                    case "modify":
                    	modify();
                    	return;
                    case "delete":
                        delete2();
                        return;
                }   
            }
        }
        
        
        function add(){
        	$.ligerDialog.open({
				width : 300,
				height :420,
				target : $("#productEditForm"),
				title : '新增城市信息',
				buttons : [ {
					text : '确定',
					onclick : function(item, dialog) {
						if(checkForm()){
							dialog.hidden();
							$.ajax({
								cache : false,
								type : "post",
								data: $("#productEditForm").serialize(), 
								url : "<%=request.getContextPath()%>/productManageAction!saveOrUpdate.action",
								success : function(data){
									$.ligerDialog.alert('添加成功！', '提示', "success",function(){
										location.href = "<%=request.getContextPath()%>/fare/productManage/productManage.jsp";
									})
								},
								error : function(){
									$.ligerDialog.error('服务器出错，操作失败，请重试!');
								}
							});
						}
					}
				}, {
					text : '取消',
					onclick : function(item, dialog) {
						dialog.hidden();
					}
				} ]
			});
        }
        
        function modify(){
        	var rowsdata = gridManager.getCheckedRows();
        	if (!rowsdata.length) {
        	 	alert('请选择一行进行修改');
        	 	return;
        	}
        	if(rowsdata.length > 1){
        		alert('修改只能选一行');
        	 	return;
        	}
        	$("#id").attr("value",rowsdata[0].id);
        	$("#name").attr("value",rowsdata[0].name);
        	$("#companyName").attr("value",rowsdata[0].companyName);
        	$("#productType").attr("value",rowsdata[0].productType);
        	$("#voyage").attr("value",rowsdata[0].voyage);
        	$("#startCity").attr("value",rowsdata[0].startCity);
        	$("#endCity").attr("value",rowsdata[0].endCity);
        	$("#space").attr("value",rowsdata[0].space);
        	$("#tagetDate").attr("value",rowsdata[0].tagetDate);
        	$("#travelDate").attr("value",rowsdata[0].travelDate);
        	$("#price").attr("value",rowsdata[0].price);
        	$("#productLink").attr("value",rowsdata[0].productLink);
        	$.ligerDialog.open({
				width : 300,
				height :420,
				target : $("#productEditForm"),
				title : '编辑产品信息',
				buttons : [ {
					text : '确定',
					onclick : function(item, dialog) {
						if(checkForm()){
							//这句代码不是很懂
							dialog.hidden();
							$.ajax({
								cache : false,
								type : "post",
								data: $("#productEditForm").serialize(), 
								url : "<%=request.getContextPath()%>/productManageAction!saveOrUpdate.action",
								success : function(data){
									$.ligerDialog.alert('修改成功', '提示', "success",function(){
										location.href = "<%=request.getContextPath()%>/fare/productManage/productManage.jsp";
									});
								},
								error : function(){
									$.ligerDialog.error('服务器出错，操作失败，请重试!');
									}
							});
						}
					}
				}, {
					text : '取消',
					onclick : function(item, dialog) {
						dialog.hidden();
					}
				} ]
			});
        }
        //不能命名为delete，好像和某些我导入的东西有冲突
        function delete2(){
			 var data = gridManager.getCheckedRows();
			 if (data.length == 0)
             alert('请选择行');
             else
             {
                var checkedIds = [];
                $(data).each(function ()
                {
                    checkedIds.push(this.id);
                });
                $.ligerDialog.confirm('确定删除?', function ()
                {
					$.post("<%=request.getContextPath()%>/productManageAction!delete.action", [ {
					name : 'ids',
					value : checkedIds
					} ], function() {
					    	alert("删除成功");
				   });
				   gridManager.deleteSelectedRow();
                }); 
            }                              				
        }
        
        function find(){
        	var companyName= $("#companyName_find").val();
        	var productName= $("#productName").val();
        	var productType= $("#productType_find").val();
        	var startCity= $("#routeStart").val()
			var endCity = $("#routeEnd").val();
			$.getJSON("<%=request.getContextPath()%>/productManageAction!findProductByConditions.action?name="
			+encodeURI(encodeURI(productName))+"&companyName="+encodeURI(encodeURI(companyName))+"&productType="+encodeURI(encodeURI(productType))+"&startCity="+encodeURI(encodeURI(startCity))+"&endCity="+encodeURI(encodeURI(endCity)),
			function(data){
 				$("#maingrid").ligerGrid({
	                columns: columns, 
					dataAction: 'server', 
					data: data,
	                sortName: 'name',
	                width: '100%', height: '100%', pageSize: 30,rownumbers:true,
	                checkbox : true,
	                heightDiff: -6
	            });
	            gridManager = $("#maingrid").ligerGetGridManager();
	            $("#pageloading").hide();
           });
        }
        
        //验证非空 
	function checkForm() {
		//判断输入的值是否为数字
		var strP=/^\d+$/;
		var flag=true;
		var dataFlag = true;
		if ($("#name").val() == ''||$("#companyName").val() == ''||$("#productType").val() == ''||$("#voyage").val()==''||$("#startCity").val() == ''
		||$("#space").val()==''||$("#tagetDate").val() == ''||$("#price").val()==''
		||$("#endCity").val() == ''||$("#travelDate").val() == ''||$("#productLink").val() == '') {
			flag = false;
			alert("有内容未填");
		}
		
		if (!strP.test($("#voyage").val())) {
			dataFlag = false;
			alert("航程应该输入数字！");
		}
		
		if (!strP.test($("#price").val())) {
			dataFlag=false;
			alert("价格应该输入数字！");
		}
		if($("#tagetDate").val() > $("#travelDate").val()){
			flag = false;
			alert("预定日期不能晚于旅行日期");
		}
		return flag&&dataFlag;
	}
	
        				
    </script>
</head>
<body style="padding:0px; overflow:hidden;"> 
<div class="l-loading" style="display:block" id="pageloading"></div> 

  <form id="form1" runat="server"> 

  <div id="toptoolbar"></div> 

<div class="l-panel-search">
	<div class="l-panel-search-item" >
        产品名称：<input type="text" style="width: 100px"
					id="productName" value="" >
    </div>
    <div class="l-panel-search-item">
        航空公司：<select style="width: 100px"	id="companyName_find" value="">
        	<option></option>
        	<option>中国南方航空公司</option><option>东方航空该公司</option><option>中国国际航空公司</option>
        	<option>上海航空公司</option><option>华夏航空公司</option>
        </select>
    </div>
    <div class="l-panel-search-item">
        产品类型：<select style="width: 100px"	id="productType_find" value="">
        	<option></option>
        	<option>票价直减</option>
        </select>
    </div>
    <div class="l-panel-search-item">
       航线：从
			<input type="text" style="width: 100px"
					id="routeStart" value="">
	       到
			<input type="text" style="width: 100px"
					id="routeEnd" value="">
    </div>
    <div class="l-panel-search-item">
    	<input type="button" value="查询" onclick="javascript:find();" style="width:80px;">
    </div>
</div>

    <div id="maingrid" style="margin:0; padding:0"></div>

  </form>


  <div style="display:none;">
  
</div>
 <div id="productEdit">
		<form action= "<%=request.getContextPath()%>/productManageAction!saveOrUpdate.action" method="post" id="productEditForm"style="display:block" >
			<input type="hidden" name="product.id" id="id">
			产品名称:<input type="text" name="product.name" id="name"><br>
			航空公司名称:<select style="width: 100px" name="product.companyName" id="companyName"  >
						<option></option>
        				<option>中国南方航空公司</option><option>东方航空该公司</option><option>中国国际航空公司</option>
        				<option>上海航空公司</option><option>华夏航空公司</option>
        			 </select><br>
			产品类型:<select style="width: 100px" name="product.productType"	id="productType" >
        				<option></option>
        				<option>票价直减</option>
        		  </select><br>
			航程:<input type="text" name="product.voyage" id="voyage"><br>
			起始城市:<input type="text" name="product.startCity" id="startCity"><br>
			目标城市:<input type="text" name="product.endCity" id="endCity"><br>
			舱位:<input type="text" name="product.space" id="space"><br>
			预定日期:<input type="text" name="product.tagetDate" id="tagetDate" readonly="true"><br>
			旅行日期:<input type="text" name="product.travelDate" id="travelDate" readonly="true"><br>
			价格:<input type="text" name="product.price" id="price"><br>
			产品链接:<input type="text" name="product.productLink" id="productLink"><br>
		</form>
	</div>
</body>
</html>
